---
title: Estilos al arrastrar
description: Una guía para usar Fluid DnD con la estilos al arrastrar los elementos.
---

import ListWithDraggingStyles from "@/components/svelte/ListWithDraggingStyles.svelte";
import { Code } from "@astrojs/starlight/components";

### Ejemplo de lista de números

Para mostar como usar **Fluid DnD** para añadir estilos al arrastrar elementos.
Primero, vamos a crear una lista de números añadiendo el valor a la confuración `draggingclass`:

export const highlightsListOfNumbers = ['draggingClass','"dragging"'];

export const listOfNumbers = `<script lang="ts">
import { useDragAndDrop } from "fluid-dnd/svelte";

const list = $state([1, 2, 3]);
const [ parent ] = useDragAndDrop(list,{
  draggingClass: "dragging",
});

</script>`;

<Code code={listOfNumbers} lang="svelte" mark={highlightsListOfNumbers} />

### Creando la vista

Después, crearemos la lista de números en la vista y el selector de clase para `dragging`:

export const highlights = ['dragging'];

export const listOfNumbersHTML = `
<ul use:parent class="number-list">   
  {#each list as element, index (element) }
      <li class="number" data-index = {index}>
          { element }
      </li>
  {/each}
</ul>

<style>
/*....*/
.dragging {
  transition: background-color color 150ms ease-in, color 150ms ease-in;
  background-color: var(--sl-color-gray-1);
  color: black;
}
</style>

`;

<Code code={listOfNumbersHTML} mark={highlights} lang="svelte" />

### Resultado

<div class="pl-8">
  <ListWithDraggingStyles client:load />
</div>
